<script lang="ts" setup>
const open = ref<boolean>(false)

const showModal = () => {
  open.value = true
}

const handleOk = (e: MouseEvent) => {
  console.log(e)
  open.value = false
}

//获取课程数据
import Courses from '@/assets/json/courses.json'
const courses = ref(Courses.data)
</script>

<template>
  <div class="lecturerdetails">
    <!-- 头部 个人讲师详情 -->
    <div class="lecturerdetails-image">
      <div class="lecturerdetails-image-information">
        <img src="@/assets/lijie.jpg" alt="" />
        <div class="lecturerdetails-image-information-brief">
          <h3>李捷</h3>
          <h5>硕士生导师，工学博士，信息系统项目架构师（高级）</h5>
        </div>
        <a-button type="primary">关注</a-button>
      </div>
    </div>
    <div class="lecturerdetails-content">
      <!-- 内容left 授课详情 -->
      <div class="lecturerdetails-content-teaching">
        <h3>主讲课程 <span>{{ courses.length }}</span></h3>
        <div class="course-list">
          <template v-for="item in courses" :key="item.id">
            <educ-collect :value="item" />
          </template>
        </div>
      </div>
      <!-- 内容right 直播 -->
      <div class="lecturerdetails-content-broadcast">
        <h3>直播</h3>
        <img src="@/assets/xiangqing.png" alt="" />
        <p class="lecturerdetails-content-broadcast-p">
          华为开发者联盟认证 python数据分析
        </p>
        <h3 class="lecturerdetails-content-broadcast-h3">最近发表</h3>
        <div class="lecturerdetails-content-broadcast-p">
          <p>请同学们讲问题在vip答疑群里提出...</p>
          <p @click="showModal" style="color: #58d38a; cursor: pointer">
            企业微信群聊答疑专区(2024年)
          </p>
          <!-- 模态框 群聊二维码 -->
          <a-modal v-model:open="open" title="企业微信群聊：" okText="确定" cancelText="取消" @ok="handleOk">
            <img style="width: 100%" src="@/assets/weixinqun.png" alt="" />
          </a-modal>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.lecturerdetails {
  width: 100%;
  padding: 0;
  margin: 0 auto;

  &-image {
    display: flex;
    align-items: flex-end;
    width: 100%;
    height: 200px;
    background-image: url('@/assets/xiangqing.png');
    background-repeat: no-repeat;
    background-size: cover;

    &-information {
      display: flex;
      align-items: center;
      width: 100%;
      padding: 30px;

      img {
        width: 60px;
        height: 60px;
        padding: 2px;
        background-color: $educ-color-white;
        border-radius: 100px;
      }

      &-brief {
        width: 100%;
        margin-left: 15px;
        color: $educ-color-white;
      }
    }
  }

  .course-list {
    display: flex;
    flex-wrap: wrap;
  }

  .course-list>* {
    box-sizing: border-box; // 包含 padding 和 border
    flex: 1 0 calc(33.333% - 16px); // 每行展示3个，计算间距后宽度
    max-width: calc(33.333% - 16px);
  }

  &-content {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-top: 20px;

    &-teaching {
      width: 80%;
    }

    &-broadcast {
      width: 20%;

      img {
        width: 100%;
        height: 100px;
        margin-top: 20px;
      }

      p {
        font-size: 15px;
      }

      &-h3 {
        margin-top: 40px;
      }

      &-p {
        margin-top: 15px;
      }
    }
  }
}
</style>
